<template>
  <div>
    <button @click="comName = 'PartFourPanel'">个人信息填写</button>
    <button @click="comName = 'PartFivePanel'">账号密码填写</button>
    <!--     目标: 动态组件 - 切换组件显示-->
    <!--     场景: 同一个挂载点要切换 不同组件 显示-->
    <!--     1. 创建要被切换的组件 - 标签+样式-->
    <!--     2. 引入到要展示的vue文件内, 注册-->
    <!--     3. 变量-承载要显示的组件名-->
    <!--     4. 设置挂载点<component :is="变量"></component>-->
    <!--     5. 点击按钮-切换comName的值为要显示的组件名-->
    <p>动态dynamic组件使用:</p>
    <div style="border: 1px solid red;">
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import PartFourPanel from "./PartFourPanel";
import PartFivePanel from "./PartFivePanel";

export default {
  name: "BasicApiSix",
  data() {
    return {
      comName: "PartFourPanel"
    }
  },
  components: {
    PartFourPanel,
    PartFivePanel
  }
}
</script>

<style scoped>

</style>
